<template>
  <div>
    <div class="tabbar-blank"></div>
    <div class="tabbar">
      <router-link tag="div" :class="['tabbar-item', current === 1 ? 'active' : '']" to="/">
        <i class="iconfont">&#xe603;</i>
        <span>首页</span>
      </router-link>
      <router-link tag="div" :class="['tabbar-item', current === 2 ? 'active' : '']" to="/category">
        <i class="iconfont">&#xe61b;</i>
        <span>分类</span>
      </router-link>
      <router-link tag="div" :class="['tabbar-item', current === 3 ? 'active' : '']" to="/shoppingcart">
        <i class="iconfont">&#xe62e;</i>
        <span>购物车</span>
      </router-link>
      <router-link tag="div" :class="['tabbar-item', current === 4 ? 'active' : '']" to="/mine">
        <i class="iconfont">&#xe60a;</i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  props: ['current']
}
</script>
<style lang="less" scoped>
.tabbar-blank{
  height: 100*@rex;
}
.tabbar{
  width: 750*@rex;
  display: flex;
  padding-top: 2*@rex;
  padding-bottom: 10*@rex;
  box-shadow: 0 0 6*@rex @light;
  background: @white;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  .tabbar-item{
    flex: 1;
    text-align: center;
    color: @text-black;
    i{
      display: block;
      font-size: 36*@rex;
      margin: 8*@rex 0 0px;
    }
    span{
      display: block;
      font-size: @font-normal;
    }
    &.active{
      color: @text-red;
    }
  }
}
</style>
